import { EChartsOption } from 'echarts'
import echarts from '@/plugins/echarts'

const colors = [
  "#0066FF",
  "#228B22",
  "#2E8B57",
  "#4caf50",
  "#556B2F",
  "#CD853F",
  "#FF8C00",
  "#8A2BE2",
  "#4169E1",
  "#DC143C",
  "#800080",
  "#9c27b0"
]


export const handle = (data, index = 0) => {

  return data.map((item, index2) => {
    const currentColor = colors[index]; // 当前层级固定颜色

    // 设置节点样式
    item.itemStyle = {
      borderColor: currentColor,
      color: currentColor
    };

    // 设置边线颜色
    item.lineStyle = { color: currentColor };

    // 特定层级的label和symbolSize处理
    if (index <= 1) { // 只对前两层进行特殊处理
      item.label = {
        position: "inside",
      };
    }
    item.symbolSize = index < 2 ? 70 - 20 * index : 30; // 动态设置symbolSize

    // 子节点递归处理
    if (item.children) {
      // 递归时基于当前层级的颜色选择下一个颜色（模运算循环选取）
      const nextColorIndex = (index + 1) % colors.length;
      item.children = handle(item.children, nextColorIndex);
    }

    return item;
  });
};

export const treeOptions = {
  type: "tree",
  backgroundColor: "#0056b3",
  toolbox: {
    show: true,
    iconStyle: {
      borderColor: "#03ceda"
    },
    feature: {
      restore: {}
    }
  },
  tooltip: {
    trigger: "item",
    triggerOn: "mousemove",
    backgroundColor: "rgba(1,70,86,1)",
    borderColor: "rgba(0,246,255,1)",
    borderWidth: 0.5,
    textStyle: {
      fontSize: 10,
      color: '#fff'
    }
  },
  series: [
    {
      type: "tree",
      hoverAnimation: true,
      data: [],
      top: 0,
      bottom: 0,
      left: 50,
      right: 50,
      // layout: "radial",
      symbol: "circle",
      symbolSize: 10,
      nodePadding: 20,
      animationDurationUpdate: 750,
      expandAndCollapse: true,
      initialTreeDepth: 20,
      roam: true,
      focusNodeAdjacency: true,
      itemStyle: {
        borderWidth: 1,
      },
      label: { //标签样式
        color: "#fff",
        fontSize: 14,
        fontFamily: "SourceHanSansCN",
        position: "inside",
        rotate: 0,
        fontWeight:'bold'
      },
      lineStyle: {
        width: 1,
        curveness: 0.5,
      }
    }
  ]
};
